<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0, user-scalable = no"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="renderer" content="webkit">
<meta name="msapplication-tap-highlight" content="no" /><!-- winphone 点击无高光 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>演示例子</title>
<link rel="stylesheet" type="text/css" href="wsjframe.css?v=1" />
</head>
<body>
<style>
html,body,p,h1,h2,h3,h4,h5,h6,form,input,textarea,select,button,fieldset,legend,img,ul,ol,li,dl,dt,dd,th,td,pre,blockquote{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-webkit-font-oothing:antialiased;-webkit-overflow-scrolling:touch;font-size: 100px;}
/*0.14rem===14px*/
body{font:0.14rem 'Hiragino Sans GB','Microsoft Yahei','微软雅黑','宋体',\5b8b\4f53,Tahoma,Arial;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight:rgba(0,0,0,0);background:#ebedf0;color:#000;-webkit-overflow-scrolling:touch;}

img,fieldset{border:0;}
input,button,select,textarea{padding:0;margin:0;outline:none;}
input[type="submit"],input[type="button"],button{-webkit-appearance:none;outline:none;}
a{text-decoration:none;color:#333;}
ul,li,ol{list-style:none}
table{/*border-collapse: collapse;*/border-spacing: 0;}
.clear{clear:both;height:0;line-height:0;font-size:0;visibility:hidden;overflow:hidden;}
.clearfix::after{content:"\200B";display:block;height:0;clear:both;}
.clearfix{*zoom:1;}
.l{float:left;}
.r{float:right;}
.bgblue{background-color:#337ab7;}
.bgred{background-color:#d9534f;}

</style>
<h1>栅栏布局</h1>


<div class="wsj-row mgb10">
    <div class="wsj-col-4 bgblue">4/12</div>
    <div class="wsj-col-6 bgred">6/12</div>
    <div class="wsj-col-2 bgblue">2/12</div>
</div>

<div class="wsj-row mgb10">
    <div class="wsj-col-1 "><div class="bgblue">1/12</div></div>
    <div class="wsj-col-5 wsj-col-offset6 bgred">5/12 偏移6/12</div>
</div>

<div class="wsj-row yt mgb10">
    <div class="wsj-col-150 bgblue">固定150px</div>
    <div class="yt-f1 bgred">中间自适应占满</div>
        <div class="wsj-col-000 bgblue">固定100px</div>
</div>







<h1>表单元素</h1>
<h2>普通按钮</h2>
<div class="wsj-form-box">
    <div class="wsj-form-left pd915">按钮</div>
    <div class="wsj-form-right">
        <button type="button" class="wsj-btn">（默认）百度蓝wsj-btn</button>
<button type="button" class="wsj-btn wsj-btn-white ">btn-white</button>
<button type="button" class="wsj-btn wsj-btn-gray">wsj-btn-gray</button>
    </div>

</div>
<h2>large按钮</h2>
<div class="wsj-form-box">
    <div class="wsj-form-left pd915">按钮</div>
    <div class="wsj-form-right">
        <button type="button" class="wsj-btn wsj-btn-red wsj-btn-lg">btn-red+wsj-btn-lg</button>
        <button type="button" class="wsj-btn wsj-btn-pink wsj-btn-lg">wsj-btn-pink</button>
    </div>
</div>

<h2>small按钮</h2>
<div class="wsj-form-box">
    <div class="wsj-form-left pd915">按钮</div>
    <div class="wsj-form-right">
<button type="button" class="wsj-btn wsj-btn-purple wsj-btn-sm">btn-purple+wsj-btn-sm</button>
<button type="button" class="wsj-btn wsj-btn-yellow wsj-btn-sm">wsj-btn-yellow</button>
<button type="button" class="wsj-btn wsj-btn-yellow-black wsj-btn-sm">wsj-btn-yellow-black</button>
    </div>
</div>

<h2>禁用按钮</h2>
<div class="wsj-form-box">
        <div class="wsj-form-left pd915">按钮</div>
    <div class="wsj-form-right">

<button type="button" class="wsj-btn wsj-btn-disable" disabled>禁用btn-disable</button>
    </div>
    </div>

<h2>其他按钮</h2>
<div class="wsj-form-box">
    <div class="wsj-form-left pd915">按钮</div>
    <div class="wsj-form-right">
      <button type="button" class="wsj-btn wsj-btn-green wsj-btn-light">btn-green,btn-light,白光</button>
      <button type="button" class="wsj-btn wsj-btn-light">btn-light,白光</button>
      <button class="wbutton-3d">3D按钮-复制到剪贴板</button>
      <button class="wshadowbtn">光泽按钮</button>
      <button class="wshadowbtn-round">圆形</button>
    </div>
</div>

<h2>全屏按钮</h2>
<div class="wsj-form-box">
    <div class="wsj-form-left pd915">按钮</div>
    <div class="wsj-form-right">

     <button type="button" class="wsj-btn wsj-btn-orange wsj-btn-full">btn-orange wsj-btn-full</button>

    </div>
</div>



<h2>input</h2>
<div class="wsj-form-box">
    <div class="wsj-form-left pd915">input:</div>
    <div class="wsj-form-right">
        <input type="text" class="wsj-form-input">
    </div>
</div>
<div class="wsj-row wsj-form-box">
    <div class="wsj-form-left pd915">input:</div>
    <div class="wsj-form-right">
        <div class="wsj-col-200"><input type="text" class="wsj-form-input"></div>
        <div class="wsj-col-300"><div class="wsj-form-tips">辅助信息,外层套一个wsj-col-200来控制宽度</div></div>
    </div>
</div>
<div class="wsj-row wsj-form-box">
    <div class="wsj-form-left pd915">input:</div>
    <div class="wsj-form-right">
        <div class="wsj-col-200"><input type="text" class="wsj-form-input" value="不可用" disabled></div>
        <div class="wsj-col-300"><div class="wsj-form-tips">辅助信息,外层套一个wsj-col-200来控制宽度</div></div>
    </div>
</div>


<h2>checkbox</h2>
<div class="yt">
<div class="wsj-checkbox" >
  <input id="ckaaa1" type="checkbox" name="ckb11" value="ck">
  <label class="yt yt-ac" for="ckaaa1" id="cdmm">
    <div class="icon-checkbox"></div>
    <div class="wsj-checkbox-desc">方形checkbox</div>
  </label>
</div>

<div class="wsj-checkbox">
  <input id="ckaaa2" type="checkbox" name="ckb11" value="ck">
  <label class="yt yt-ac " for="ckaaa2">
    <div class="icon-checkbox"></div>
    <div class="wsj-checkbox-desc">方形checkbox</div>
  </label>
</div>

<div class="wsj-checkbox">
  <input id="ckaaa3" type="checkbox" name="ckb11" value="ck" disabled>
  <label class="yt yt-ac " for="ckaaa3">
    <div class="icon-checkbox"></div>
    <div class="wsj-checkbox-desc">方形checkbox</div>
  </label>
</div>

<div class="wsj-checkbox">
  <input id="ckaaa4" type="checkbox" name="ckb11" value="ck" disabled checked>
  <label class="yt yt-ac " for="ckaaa4" >
    <div class="icon-checkbox"></div>
    <div class="wsj-checkbox-desc">方形checkbox</div>
  </label>
</div>

</div>

<br />

<div class="yt">

  <div class="wsj-checkbox wsj-checkbox-red">
    <input id="ckaaa1red" type="checkbox" name="ckb11" value="ck">
    <label class="yt yt-ac" for="ckaaa1red">
      <div class="icon-checkbox"></div>
      <div class="wsj-checkbox-desc">方形checkbox</div>
    </label>
  </div>

<div class="wsj-checkbox wsj-checkbox-red">
  <input id="ckaaa2red" type="checkbox" name="ckb11" value="ck">
  <label class="yt yt-ac " for="ckaaa2red">
    <div class="icon-checkbox"></div>
    <div class="wsj-checkbox-desc">方形checkbox</div>
  </label>
</div>

<div class="wsj-checkbox wsj-checkbox-red">
  <input id="ckaaa3red" type="checkbox" name="ckb11" value="ck" disabled>
  <label class="yt yt-ac" for="ckaaa3red">
    <div class="icon-checkbox"></div>
    <div class="wsj-checkbox-desc">方形checkbox</div>
  </label>
</div>

<div class="wsj-checkbox wsj-checkbox-red">
  <input id="ckaaa4red" type="checkbox" name="ckb11" value="ck" disabled checked>
  <label class="yt yt-ac " for="ckaaa4red">
    <div class="icon-checkbox"></div>
    <div class="wsj-checkbox-desc">方形checkbox</div>
  </label>
</div>

</div>

<br />

<div class="yt">

<div class="wsj-checkbox wsj-checkbox-green">
  <input id="ckaaa1green" type="checkbox" name="ckb11" value="ck">
  <label class="yt yt-ac" for="ckaaa1green">
    <div class="icon-checkbox"></div>
    <div class="wsj-checkbox-desc">方形checkbox</div>
  </label>
</div>

<div class="wsj-checkbox wsj-checkbox-green">
  <input id="ckaaa2green" type="checkbox" name="ckb11" value="ck">
  <label class="yt yt-ac " for="ckaaa2green">
    <div class="icon-checkbox"></div>
    <div class="wsj-checkbox-desc">方形checkbox</div>
  </label>
</div>

<div class="wsj-checkbox wsj-checkbox-green">
  <input id="ckaaa3green" type="checkbox" name="ckb11" value="ck" disabled>
  <label class="yt yt-ac" for="ckaaa3green">
    <div class="icon-checkbox"></div>
    <div class="wsj-checkbox-desc">方形checkbox</div>
  </label>
</div>

<div class="wsj-checkbox wsj-checkbox-green">
  <input id="ckaaa4green" type="checkbox" name="ckb11" value="ck" disabled checked>
  <label class="yt yt-ac" for="ckaaa4green">
    <div class="icon-checkbox"></div>
    <div class="wsj-checkbox-desc">方形checkbox</div>
  </label>
</div>
</div>

<br />

<div class="yt">

<div class="wsj-checkbox  wsj-checkbox-round">
  <input id="ckround1" type="checkbox" name="ckb22" value="ck2">
  <label class="yt yt-ac" for="ckround1">
    <div class="icon-checkbox"></div>
    <div class="wsj-checkbox-desc">打勾checkbox</div>
  </label>
</div>


<div class="wsj-checkbox  wsj-checkbox-round">
  <input id="ckround2" type="checkbox" name="ckb22" value="ck2">
  <label class="yt yt-ac" for="ckround2">
    <div class="icon-checkbox"></div>
    <div class="wsj-checkbox-desc">打勾checkbox</div>
  </label>
</div>

<div class="wsj-checkbox  wsj-checkbox-round">
<input id="ckround3" type="checkbox" name="ckb22" value="ck2" disabled>
<label class="yt yt-ac " for="ckround3">
  <div class="icon-checkbox"></div>
  <div class="wsj-checkbox-desc">打勾checkbox</div>
</label>
</div>

<div class="wsj-checkbox  wsj-checkbox-round">
  <input id="ckround4" type="checkbox" name="ckb22" value="ck2" disabled checked>
  <label class="yt yt-ac" for="ckround4">
    <div class="icon-checkbox"></div>
    <div class="wsj-checkbox-desc">打勾checkbox</div>
  </label>
</div>
</div>

<br />

<div class="yt">

<div class="wsj-checkbox  wsj-checkbox-round wsj-checkbox-red">
  <input id="ckround1red" type="checkbox" name="ckb22" value="ck2">
    <label class="yt yt-ac" for="ckround1red">
      <div class="icon-checkbox"></div>
      <div class="wsj-checkbox-desc">打勾checkbox</div>
    </label>
</div>

<div class="wsj-checkbox wsj-checkbox-red  wsj-checkbox-round">
  <input id="ckround2red" type="checkbox" name="ckb22" value="ck2">
  <label class="yt yt-ac " for="ckround2red">
    <div class="icon-checkbox"></div>
    <div class="wsj-checkbox-desc">打勾checkbox</div>
  </label>
</div>

<div class="wsj-checkbox wsj-checkbox-red  wsj-checkbox-round">
  <input id="ckround3red" type="checkbox" name="ckb22" value="ck2" disabled>
  <label class="yt yt-ac " for="ckround3red">
    <div class="icon-checkbox"></div>
    <div class="wsj-checkbox-desc">打勾checkbox</div>
  </label>
</div>


<div class="wsj-checkbox wsj-checkbox-red  wsj-checkbox-round">
  <input id="ckround4red" type="checkbox" name="ckb22" value="ck2" disabled checked>
  <label class="yt yt-ac" for="ckround4red">
    <div class="icon-checkbox"></div>
    <div class="wsj-checkbox-desc">打勾checkbox</div>
  </label>
</div>

</div>

<br />

<div class="yt">

<div class="wsj-checkbox wsj-checkbox-green  wsj-checkbox-round">
  <input id="ckround1green" type="checkbox" name="ckb22" value="ck2">
  <label class="yt yt-ac" for="ckround1green">
    <div class="icon-checkbox"></div>
    <div class="wsj-checkbox-desc">打勾checkbox</div>
  </label>
</div>

<div class="wsj-checkbox wsj-checkbox-green  wsj-checkbox-round">
  <input id="ckround2green" type="checkbox" name="ckb22" value="ck2">
  <label class="yt yt-ac" for="ckround2green">
    <div class="icon-checkbox"></div>
    <div class="wsj-checkbox-desc">打勾checkbox</div>
  </label>
</div>

<div class="wsj-checkbox wsj-checkbox-green  wsj-checkbox-round">
  <input id="ckround3green" type="checkbox" name="ckb22" value="ck2" disabled>
  <label class="yt yt-ac" for="ckround3green">
    <div class="icon-checkbox"></div>
    <div class="wsj-checkbox-desc">打勾checkbox</div>
  </label>
</div>

<div class="wsj-checkbox wsj-checkbox-green  wsj-checkbox-round">
  <input id="ckround4green" type="checkbox" name="ckb22" value="ck2" disabled checked>
  <label class="yt yt-ac" for="ckround4green">
    <div class="icon-checkbox"></div>
    <div class="wsj-checkbox-desc">打勾checkbox</div>
  </label>
</div>
<pre>
  用document.querySelectorAll('input[type="checkbox"][name="ckb22"]');获取值
</pre>
</div>

<br />
<div style="background-color:#fff;padding:10px;">
<label for="aa" class="yt yt-ac wswitch-checkbox">
  <input type="checkbox" id="aa">
  <div class="icon"></div>
</label>
</div>


<br />
<label class="wswitch wswitch-danger">
  <input type="checkbox" name="ispush" class="switch-input" value="1" >
  <div class="switch-label" data-on="是" data-off="否"></div>
  <div class="switch-handle"></div>
</label>

<br />


<h2>radio</h2>
<div class="yt">


  <div class="wsj-radio">
    <input id="ra1" type="radio" name="aa1" value="xxa">
    <label class="yt yt-ac" for="ra1">
      <div class="icon-radio"></div>
      <div class="wsj-radio-desc">圆圈radio</div>
    </label>
  </div>

<div class="wsj-radio">
  <input id="ra2" type="radio" name="aa1" value="xxa">
  <label class="yt yt-ac" for="ra2">
    <div class="icon-radio"></div>
    <div class="wsj-radio-desc">圆圈radio</div>
  </label>
</div>

<div class="wsj-radio">
  <input id="ra3" type="radio" name="aa1" value="xxa" disabled>
    <label class="yt yt-ac " for="ra3">
      <div class="icon-radio"></div>
      <div class="wsj-radio-desc">圆圈radio</div>
    </label>
</div>

<div class="wsj-radio">
  <input id="ra4" type="radio" name="aa1" value="xxa" disabled checked>
    <label class="yt yt-ac" for="ra4">
      <div class="icon-radio"></div>
      <div class="wsj-radio-desc">圆圈radio</div>
    </label>
</div>

</div>

<br />


<div class="yt">
  
  <div class="wsj-radio wsj-radio-red">
    <input id="ra1red" type="radio" name="aa1red" value="xxa">
    <label class="yt yt-ac " for="ra1red">
      <div class="icon-radio"></div>
      <div class="wsj-radio-desc">圆圈radio</div>
    </label>
  </div>

<div class="wsj-radio wsj-radio-red">
  <input id="ra2red" type="radio" name="aa1red" value="xxa">
  <label class="yt yt-ac " for="ra2red">
    <div class="icon-radio"></div>
    <div class="wsj-radio-desc">圆圈radio</div>
  </label>
</div>

<div class="wsj-radio wsj-radio-red">
  <input id="ra3red" type="radio" name="aa1red" value="xxa" disabled>
  <label class="yt yt-ac" for="ra3red">
    <div class="icon-radio"></div>
    <div class="wsj-radio-desc">圆圈radio</div>
  </label>
</div>

<div class="wsj-radio wsj-radio-red">
  <input id="ra4red" type="radio" name="aa1red" value="xxa" disabled checked>
  <label class="yt yt-ac" for="ra4red">
    <div class="icon-radio"></div>
    <div class="wsj-radio-desc">圆圈radio</div>
  </label>
</div>

</div>

<br />

<div class="yt">

<div class="wsj-radio wsj-radio-green">
  <input id="ra1green" type="radio" name="aa1green" value="xxa">
  <label class="yt yt-ac" for="ra1green">
    <div class="icon-radio"></div>
    <div class="wsj-radio-desc">圆圈radio</div>
  </label>
</div>


<div class="wsj-radio wsj-radio-green">
  <input id="ra2green" type="radio" name="aa1green" value="xxa">
  <label class="yt yt-ac" for="ra2green">
    <div class="icon-radio"></div>
    <div class="wsj-radio-desc">圆圈radio</div>
  </label>
</div>


<div class="wsj-radio wsj-radio-green">
  <input id="ra3green" type="radio" name="aa1green" value="xxa" disabled>
  <label class="yt yt-ac" for="ra3green">
    <div class="icon-radio"></div>
    <div class="wsj-radio-desc">圆圈radio</div>
  </label>
</div>


<div class="wsj-radio wsj-radio-green">
  <input id="ra4green" type="radio" name="aa1green" value="xxa" disabled checked>
  <label class="yt yt-ac" for="ra4green">
    <div class="icon-radio"></div>
    <div class="wsj-radio-desc">圆圈radio</div>
  </label>
</div>

</div>

<br />

<h4>radio打勾按钮</h4>
<div class="yt">
  <div class="wsj-radio wsj-radio-tick">
    <input id="ra1tick" type="radio" name="ratick" value="xxa">
    <label class="yt yt-ac" for="ra1tick">
      <div class="icon-radio"></div>
      <div class="wsj-radio-desc">打勾radio</div>
    </label>
  </div>


<div class="wsj-radio wsj-radio-tick">
  <input id="ra2tick" type="radio" name="ratick" value="xxa">
  <label class="yt yt-ac " for="ra2tick">
    <div class="icon-radio"></div>
    <div class="wsj-radio-desc">打勾radio</div>
  </label>
</div>


<div class="wsj-radio wsj-radio-tick">
  <input id="ra3tick" type="radio" name="ratick" value="xxa" disabled>
  <label class="yt yt-ac" for="ra3tick">
    <div class="icon-radio"></div>
    <div class="wsj-radio-desc">打勾radio</div>
  </label>
</div>


<div class="wsj-radio wsj-radio-tick">
  <input id="ra4tick" type="radio" name="ratick" value="xxa" disabled checked>
  <label class="yt yt-ac" for="ra4tick">
    <div class="icon-radio"></div>
    <div class="wsj-radio-desc">打勾radio</div>
  </label>
</div>
</div>

<br />

<div class="yt">

<div class="wsj-radio wsj-radio-red wsj-radio-tick">
  <input id="ra1tickred" type="radio" name="ratickred" value="xxa">
  <label class="yt yt-ac" for="ra1tickred">
    <div class="icon-radio"></div>
    <div class="wsj-radio-desc">打勾radio</div>
  </label>
</div>


<div class="wsj-radio wsj-radio-red wsj-radio-tick">
  <input id="ra2tickred" type="radio" name="ratickred" value="xxa">
  <label class="yt yt-ac" for="ra2tickred">
    <div class="icon-radio"></div>
    <div class="wsj-radio-desc">打勾radio</div>
  </label>
</div>


<div class="wsj-radio wsj-radio-red wsj-radio-tick">
  <input id="ra3tickred" type="radio" name="ratickred" value="xxa" disabled>
  <label class="yt yt-ac" for="ra3tickred">
    <div class="icon-radio"></div>
    <div class="wsj-radio-desc">打勾radio</div>
  </label>
</div>


<div class="wsj-radio wsj-radio-red wsj-radio-tick">
  <input id="ra4tickred" type="radio" name="ratickred" value="xxa" disabled checked>
  <label class="yt yt-ac" for="ra4tickred">
    <div class="icon-radio"></div>
    <div class="wsj-radio-desc">打勾radio</div>
  </label>
</div>

</div>

<br />

<div class="yt">
  <div class="wsj-radio wsj-radio-green wsj-radio-tick">
    <input id="ra1tickgreen" type="radio" name="ratickgreen" value="xxa第一个">
    <label class="yt yt-ac " for="ra1tickgreen">
      <div class="icon-radio"></div>
      <div class="wsj-radio-desc">打1勾radio</div>
    </label>
  </div>


  <div class="wsj-radio wsj-radio-green wsj-radio-tick">
    <input id="ra2tickgreen" type="radio" name="ratickgreen" value="xxa第二个">
    <label class="yt yt-ac" for="ra2tickgreen">
      <div class="icon-radio"></div>
      <div class="wsj-radio-desc">打勾radio</div>
    </label>
  </div>

<div class="wsj-radio wsj-radio-green wsj-radio-tick">
  <input id="ra3tickgreen" type="radio" name="ratickgreen" value="xxa第三个" disabled>
  <label class="yt yt-ac " for="ra3tickgreen">
    <div class="icon-radio"></div>
    <div class="wsj-radio-desc">打勾radio</div>
  </label>
</div>

<div class="wsj-radio wsj-radio-green wsj-radio-tick">
  <input id="ra4tickgreen" type="radio" name="ratickgreen" value="xxa第四个" disabled checked>
  <label class="yt yt-ac" for="ra4tickgreen">
    <div class="icon-radio"></div>
    <div class="wsj-radio-desc">打勾radio</div>
  </label>
</div>
<div>
  <pre>
    用document.querySelector('input[name="ratickgreen"]:checked');获取值
  </pre>
</div>

</div>

<br />






<div class="wsj-form-box">
    <div class="wsj-form-left pd915">下拉框</div>
    <div class="wsj-form-right">
        <select class="wsj-form-select" id="mySelect1">
    <option value="张三的值">张三</option>
    <option value="李四的值">李四</option>
    <option value="王五的值" selected>王五</option>
</select></div>
</div>

<div class="wsj-form-box" >
    <div class="wsj-form-left pd915">下拉框</div>
    <div class="wsj-form-right">
        <div class="wsj-col-6">
       <select class="wsj-form-select" id="mySelect2">
    <option value="美国的值">美国</option>
    <option value="英国的值" selected>英国</option>
    <option value="日本的值">日本</option>
</select></div></div>
</div>



<div><button type="button" class="wsj-btn wsj-btn-orange wsj-btn-full" id="getClassSelVal">点我得到下拉框的值(selFormat.get('.wsj-form-select')是数组)</button></div>
<div><button type="button" class="wsj-btn wsj-btn-purple wsj-btn-full" id="getIdSelVal">点我得到下拉框的值(selFormat.get('#mySelect2'))</button></div>
<div>
<button type="button" class="wsj-btn wsj-btn-full" onclick="location.href='https://blog.csdn.net/aexwx/article/details/86909278'">checkbox,radio,select,input各种方法大全，js与jq</button>
</div>

<div style="height:400px;"></div>
<script>
// var obj=document.getElementById('mySelect');
// var items=document.getElementById("mySelect").options;//获取select的所有option

// var index=obj.selectedIndex; //序号，取当前选中选项的序号
// var val = obj.options[index].value;


// for(var i=0;i<document.getElementById('sel_body1').getElementsByClassName('sel-item').length;i++){
//     document.getElementById('sel_body1').getElementsByClassName('sel-item')[i].onclick=function(){
//     console.log(this.getAttribute('data-val'))
// }
// }
    function insertAfter(newEl, targetEl) {
        var parentEl = targetEl.parentNode;
        if (parentEl.lastChild == targetEl) {
            parentEl.appendChild(newEl);
        } else {
            parentEl.insertBefore(newEl, targetEl.nextSibling);
        }
    }
function selFormat() {
    for (let i = 0; i < document.getElementsByClassName('wsj-form-select').length; i++) {
        var currentDOM = document.getElementsByClassName('wsj-form-select')[i]
        var len = currentDOM.options.length
        var selectIndex = currentDOM.selectedIndex
        var selVal = currentDOM.options[selectIndex].value
        var selText = currentDOM.options[selectIndex].text
        var cc = ''
        if (document.getElementById('sel_wrap' + i)) {
            document.getElementById('sel_wrap' + i).parentNode.removeChild(document.getElementById('sel_wrap' + i))
        }
        var oDiv = document.createElement('div')
        oDiv.id = 'sel_wrap' + i
        oDiv.className = 'wsj-sel-wrap'
        oDiv.innerHTML = ''

        var oDivHead = document.createElement('div')
        oDivHead.id = 'sel_head' + i
        oDivHead.className = 'wsj-sel-head'
        oDivHead.innerHTML = '<div id="sel_arr' + i + '" class="wsj-sel-arr"></div>\
    <div id="sel_first'+ i + '" class="wsj-sel-first" data-val="' + selVal + '">' + selText + '</div>'
        oDiv.appendChild(oDivHead)
        var cc_list = ''
        for (var j = 0; j < len; j++) {
            if (currentDOM.selectedIndex == j) {
                cc_list += '<div class="wsj-sel-item wsj-sel-item-cur" data-val="' + currentDOM.options[j].value + '">' + currentDOM.options[j].text + '</div>'
            } else {
                cc_list += '<div class="wsj-sel-item" data-val="' + currentDOM.options[j].value + '">' + currentDOM.options[j].text + '</div>'
            }

        }

        var oDivBody = document.createElement('div')
        oDivBody.id = 'sel_body' + i
        oDivBody.className = 'wsj-sel-body'
        oDivBody.innerHTML = cc_list

        //将oDivBody紧贴到oDivHead下
        insertAfter(oDivBody, oDivHead)
        //最终贴片
        insertAfter(oDiv, currentDOM)

        function closeAllList() {
            for (var ii = 0; ii < document.getElementsByClassName('wsj-form-select').length; ii++) {
                document.getElementById('sel_body' + ii).style.display = 'none'
            }
        }
        document.getElementById('sel_head' + i).onclick = function () {
            var oMask = document.createElement('div')
            oMask.id = 'sel_mask'
            oMask.className = 'wsj-sel-mask'
            document.body.appendChild(oMask)
            document.getElementById('sel_mask').onclick = function () {
                this.parentNode.removeChild(this)
                closeAllList()
            }
            closeAllList()
            if (document.getElementById('sel_body' + i).style.display == 'block') {
                document.getElementById('sel_body' + i).style.display = 'none'
                document.getElementById('sel_arr' + i).className = 'wsj-sel-arr'
            } else {
                document.getElementById('sel_body' + i).style.display = 'block'
                document.getElementById('sel_arr' + i).className = 'wsj-sel-arr wsj-sel-arr-reverse'
            }

        }
        document.getElementById('sel_body' + i).onclick = function (e) {

            if (e.target.className === 'wsj-sel-body') { return }

            document.getElementById('sel_mask').parentNode.removeChild(document.getElementById('sel_mask'));
            var cur_val = e.target.getAttribute('data-val')
            var cur_text = e.target.innerText
            console.log(e)
            document.getElementById('sel_first' + i).innerText = cur_text
            document.getElementById('sel_first' + i).setAttribute('data-val', cur_text)
            for (var k = 0; k < len; k++) {
                document.getElementById('sel_body' + i).children[k].className = 'wsj-sel-item'
                if (cur_val == document.getElementsByClassName('wsj-form-select')[i].options[k].value) {
                    document.getElementsByClassName("wsj-form-select")[i].options[k].selected = true
                    document.getElementById('sel_body' + i).children[k].className = 'wsj-sel-item wsj-sel-item-cur'
                }
            }

            document.getElementById('sel_body' + i).style.display = 'none'
            document.getElementById('sel_arr' + i).className = 'wsj-sel-arr'

            //console.log(document.getElementsByClassName("wsj-form-select")[i].value)
        }

    }
}

selFormat()
selFormat.get = function (el) {
    if (el.substring(0, 1) === '#') {
        el = el.substring(1)
        if (document.getElementById(el) && document.getElementById(el).tagName.toLowerCase() == 'select') {
            return document.getElementById(el).value
        } else {
            alert('该id对应的元素不是select');
            return;
        }
    } else if (el.substring(0, 1) === '.') {
        el = el.substring(1)
        console.log('哈哈啊哈', document.getElementsByClassName(el)[0].tagName.toLowerCase())
        if (document.getElementsByClassName(el).length > 0 && document.getElementsByClassName(el)[0].tagName.toLowerCase() ==
            'select') {
            var arr = []
            for (var i = 0; i < document.getElementsByClassName(el).length; i++) {
                arr.push(document.getElementsByClassName(el)[i].value)
            }
            return arr
        } else {
            alert('该class对应的元素不是select')
            return
        }
    } else {
        alert('请以.或#开头,.代表class,#代表id')
    }

}

document.querySelector('#getClassSelVal').addEventListener('click', function () {
    alert(selFormat.get('.wsj-form-select'))
})
document.querySelector('#getIdSelVal').addEventListener('click', function () {
    alert(selFormat.get('#mySelect2'))
})






// 获取所有复选框
let checkboxes = document.querySelectorAll('input[type="checkbox"][name="ckb22"]');
document.querySelectorAll('input[type="checkbox"][name="ckb22"]:checked');
// 创建一个数组存储选中的值
let selectedValues = [];

// 遍历所有复选框，检查是否被选中
checkboxes.forEach(function(checkbox) {
  if (checkbox.checked) {
    selectedValues.push(checkbox.value);
  }
});

// 打印选中的值
console.log(selectedValues);









// 获取所有 name 为 ratickgreen 的单选框
let selectedRadio = document.querySelector('input[name="ratickgreen"]:checked');
// 获取选中单选框的值
if (selectedRadio) {
    console.log(selectedRadio.value);  // 打印选中的单选框的值
} else {
    console.log("没有选中的单选框");
}

</script>
</body>
</html>
